<template>
	<view class="dispose-record-detail">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">

			<view class="item" :style="computedStyle" v-if="recordType==1">
				<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/beijing-icon.png"
					mode=""></image>
				<view class="title">
					企业名称：{{enterpriseList.find((item)=>item.id==data.enterpriseid)?.customername }}
				</view>
				<view class="name">设施名称：{{data.devicename}}</view>
				<view class="code">设施编号：{{data.devicecode}}</view>
				<view class="bgc-wrap">
					<view class="one-line">
						<view class="left">涉废类型：{{ adviceTypeList.find((item)=>item.value==data.wastetype)?.text }}
						</view>
						<view class="right">涉废代码：{{data.wastecode}}</view>
					</view>
					<view class="one-line">
						<view class="left">本次更换量：{{data.wastenum}}kg</view>
						<view class="right">本次填充量：{{data.putinnum}}kg</view>
					</view>
					<view class="one-line">
						<view class="left">碘值：{{data.dianval}}</view>
						<view class="right">使用周期：{{data.circledays}}天</view>
					</view>
					<view class="one-line">
						<view class="left">预计下次更换时间：{{data.nextchangedate?.split(' ')[0]}}</view>
						<view class="right" style="width: 10rpx;"></view>
					</view>
				</view>
				<view class="change-time">
					本次更换时间：{{data.committime}}
				</view>
				<view class="img-wrap">
					<view class="pre-img">
						更换前图片：<text @click="searchImage(data.changebeforeimgurl)">点击查看</text>
					</view>
					<view class="padding-img">
						更换中图片：<text @click="searchImage(data.changemidimgurl)">点击查看</text>
					</view>
				</view>
				<view class="suf-img">
					更换后图片：<text @click="searchImage(data.changeafterimgurl)">点击查看</text>
				</view>
				<view class="suf-img">
					碘值监测报告图片：<text @click="searchImage(data.imgdianvalurl)">点击查看</text>
				</view>
				<view class="suf-img">
					相关发票图片：<text @click="searchImage(data.imgticketurl)">点击查看</text>
				</view>
				<view class="suf-img">
					入库暂存照片：<text @click="searchImage(data.imgstockkeepurl)">点击查看</text>
				</view>
			</view>
			<view class="item" v-if="recordType==2" :style="computedStyle">
				<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/beijing-icon.png"
					mode=""></image>
				<view class="title">
					企业名称：{{data.customername }}
				</view>
				<view class="name">
					处置单位：{{disposeEnterpriseList?.find((i)=>i.id==disposeData.disposeenterpriseid)?.enterprisename }}
				</view>
				<view class="code">处置类型：{{ adviceTypeList.find((item)=>item.value==disposeData.wastetype)?.text }}
				</view>
				<view class="code">
					处置量：{{disposeData.wastenum}}{{ unitList.find((i)=>i.id==disposeData.wasteunit)?.name }}</view>
				<view class="code">处置联单编号：{{disposeData.orderno}}</view>
				<view class="code">处置时间：{{disposeData.committime}}</view>
				<view class="suf-img">
					处置联单图片：<text @click="searchImage(disposeData.disposeimgurl)">点击查看</text>
				</view>
				<view class="name">车辆信息：{{disposeData.transtruck || '无'}}</view>
				<view class="code">驾驶员信息：{{disposeData.transdriver|| '无'}}</view>

			</view>

		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		reactive,
		ref,
		computed
	} from 'vue'
	let data = ref({})
	let disposeData = ref({})
	let unitList = ref([])
	let enterpriseList = ref([])
	let disposeEnterpriseList = ref([])
	let adviceTypeList = ref([])
	let recordType = ref(1)
	let name = "记录详情"
	onShow(() => {

	})
	onLoad((e) => {
		console.log(e, 'e');
		recordType.value = e.type
		data.value = JSON.parse(e.data)
		if (recordType.value == 2) {
			getDisposeDetail()
		}
	})
	let getDisposeDetail = () => {
		http({
			url: '/wasteDispose/detail',
			data: {
				id: data.value.id
			}
		}).then((res) => {
			if (res.code == 0) {
				disposeData.value = res.data
			}
		})
	}
	let computedStyle = computed(() => {

		if (recordType.value == 1) {
			return {
				height: "930rpx"
			}
		} else {
			return {
				height: "720rpx"
			}
		}
	})
	let searchImage = (url) => {

		if (!url) {
			uni.showToast({
				title: '暂无照片',
				icon: 'none'
			})
			return
		}
		let imgUrl = url.split(',')
		uni.previewImage({
			urls: imgUrl,
			current: 0
		})
	}
	http({
		url: '/enterprise/datalist'
	}).then((res) => {
		if (res.code == 0) {
			enterpriseList.value = res.data.list
		}
	})
	http({
		url: '/enterpriseThird/listThirdEnterprises'
	}).then((res) => {
		if (res.code == 0) {
			disposeEnterpriseList.value = res.data
		}
	})
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B04'
		}
	}).then((res) => {
		if (res.code == 0) {
			unitList.value = res.data

		}

	})
</script>

<style lang="scss" scoped>
	.dispose-record-detail {
		width: 100vw;
		height: 100vh;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			width: 100vw;
			height: calc(100vh - 160rpx);
			background-color: #F0F2F5;
			padding-top: 22rpx;
			display: flex;
			justify-content: center;

			.item {
				width: 690rpx;

				background: #FFFFFF;
				border-radius: 14rpx;

				position: relative;

				.change-time {
					padding-left: 37rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-top: 26rpx;
				}

				.img-wrap {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					padding-left: 37rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 47rpx;
					margin-top: 20rpx;

					.pre-img {

						text {
							color: #0874FA;
						}
					}

					.padding-img {
						text {
							color: #0874FA;
						}
					}
				}

				.suf-img {
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					padding-left: 37rpx;

					text {
						color: #0874FA;
					}
				}

				.bgc-wrap {
					width: 655rpx;
					height: 269rpx;
					background: #E5EAEF;
					border-radius: 14rpx;
					margin: 0 auto;
					padding-left: 18rpx;
					padding-right: 34rpx;
					padding-top: 26rpx;

					.one-line:nth-of-type(2),
					.one-line:nth-of-type(3),
					.one-line:nth-of-type(4) {
						margin-top: 19rpx;
					}

					.one-line {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left,
						.right {

							font-weight: 400;
							font-size: 28rpx;
							color: #666666;

						}

						.right {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 260rpx;
							text-align: left;
						}


					}
				}

				image {
					position: absolute;
					top: 84rpx;
					height: 25rpx;
					width: 690rpx;
					left: 0;
				}

				.title {
					font-weight: 500;
					font-size: 31rpx;
					color: #333333;
					height: 93rpx;
					color: #333333;
					line-height: 93rpx;
					padding-left: 34rpx;
				}

				.name,
				.code {
					margin-top: 34rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					padding-left: 34rpx;

				}

				.code {
					margin-bottom: 24rpx;
				}
			}
		}
	}
</style>